.app {
  height: 100%;

  .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  &-head {
    height: 80px;
    background: #378dff;
    padding: 0 20px;

    a {
      color: #fff;

      .anticon-down {
        margin-left: 4px;
      }

    }

    &-logo {
      color: #fff;
      font-size: 26px;

      span {
        padding-right: 4px;
      }

    }

    &-user {
      width: 150px;

      .anticon-cloud-o {
        color: #fff
      }

    }

  }

  &-container {
    height: calc(~"100% - 80px");
    position: relative;

    &-menu {
      width: 250px;
      height: 100%;
      float: left;
      font-size: 20px;
      box-shadow: 2px 1px 5px rgba(0, 0, 0, 0.3);
      overflow-y: auto;
      overflow-x: hidden;

      a {
        display: inline-block !important;
      }

      .ant-menu-inline .ant-menu-item:after,
      .app-tree-menu .ant-menu-vertical .ant-menu-item:after {
        left: 0;
        right: initial;
      }

      .ant-menu-item-group-title,
      .ant-menu-item {
        font-size: 15px;
      }

      .ant-tag {
        margin-left: 20px;
      }

      .ant-menu-item-group {
        margin-bottom: 30px;
      }

    }

    &-right {
      width: calc(~"100% - 254px");
      height: 100%;
      float: right;
      background: #fff;

      .app-title {
        height: 80px;
        padding: 30px;
        background: #e6e6e6;
      }

      .app-content {
        height: calc(~"100% - 80px");
        padding: 30px;
        background: #f7f7f7;
        overflow-y: auto;
        overflow-x: hidden;
      }

    }

  }

}